<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>单表增删改查demo1</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
  
    
    <link rel="stylesheet" href="../../resources/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../resources/css/bootstrap-vue.min.css"/>
    

    <link rel="stylesheet" type="text/css" href="../../resources/files/assets/icon/themify-icons/themify-icons.css">
    <link rel="stylesheet" type="text/css" href="../../resources/files/assets/icon/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="../../resources/files/assets/pages/waves/css/waves.min.css" >
    <link rel="stylesheet" type="text/css" href="../../resources/files/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../resources/files/bower_components/ztree/css/bootstrapztree.css" >

<style type="text/css">

</style>
    
  </head>
<body>
<div id="app" class="container-fluid" ><router-view></router-view></div>


<template id="listTemplate">

<div class="card">
<div class="card-header">
<h5>菜单管理</h5>
</div>

<div class="card-block">
<div class="row">
<div class="col-sm-4">
<ul id="tree1" class="ztree"></ul>
</div>
<div class="col-sm-8">

<form class="form-material" v-on:submit.prevent="onSubmit">
			<div class="form-group form-default">
			<input type="text" name="id" class="form-control" required="" v-model="vo.id">
			<span class="form-bar"></span>
			<label class="float-label">ID</label>
			</div>
			<div class="form-group form-default">
			<input type="text" name="name" class="form-control" v-model="vo.name" required="">
			<span class="form-bar"></span>
			<label class="float-label">名称</label>
			</div>
            <button type="submit" class="btn btn-primary" >保存</button>
		</form>



</div>
</div>
</div>


</template><!-- list end -->


<!-- end 添加模板  -->
<script type="text/javascript" src ="../../resources/js/vue.min.js"></script>
<script type="text/javascript" src ="../../resources/js/bootstrap-vue.min.js"></script>
<script type="text/javascript" src ="../../resources/js/axios.min.js"></script>
<script type="text/javascript" src ="../../resources/js/vue-axios.min.js"></script>
<script type="text/javascript" src ="../../resources/js/vue-router.min.js"></script>
<script type="text/javascript" src ="../../resources/js/app.js"></script>
<script type="text/javascript" src="../../resources/files/bower_components/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="../../resources/files/bower_components/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../resources/files/bower_components/ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../resources/files/bower_components/ztree/js/jquery.ztree.exedit.js"></script>

<script type="text/javascript">(function (){

var list   = {
	 template: '#listTemplate' 
	,data:function(){return	{
		vo:{id:null,name: null}
     }}//data
,mounted: function() {
	this.listPage();//加载时加载列表
}
,methods:{
 listPage:function(){
	 var that=this;
	 function zTreeOnDblClick(event, treeId, treeNode) {
		// alert(treeNode.id + ", " +treeNode.tId + ", " + treeNode.name);
		that.vo=treeNode;
	 }
	 
	 function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
		 alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
	 }
	 
	 var setting = {
	            view: {
	                addHoverDom: addHoverDom,
	                removeHoverDom: removeHoverDom,
	                selectedMulti: false
	            },
	            check: {
	                enable: true
	            },
	            data: {
	                simpleData: {
	                    enable: true
	                }
	            }
	            ,edit: {
	                enable: true
	            }
	            ,callback: {
	            	 onDblClick: zTreeOnDblClick
	            	,onDrop: zTreeOnDrop //拖拽结束
	        	}
	        };

	        var zNodes =[
	        {id:1, pId:0, name:"[core] 基本功能 演示", open:true},
			{id:101, pId:1, name:"最简单的树 --  标准 JSON 数据"},
			{id:102, pId:1, name:"最简单的树 --  简单 JSON 数据"},
			{id:103, pId:1, name:"不显示 连接线"},
			{id:104, pId:1, name:"不显示 节点 图标"},
			{id:108, pId:1, name:"异步加载 节点数据"},
			{id:109, pId:1, name:"用 zTree 方法 异步加载 节点数据"},
			{id:110, pId:1, name:"用 zTree 方法 更新 节点数据"},
			{id:111, pId:1, name:"单击 节点 控制"},
			{id:112, pId:1, name:"展开 / 折叠 父节点 控制"},
			{id:113, pId:1, name:"根据 参数 查找 节点"},
			{id:114, pId:1, name:"其他 鼠标 事件监听"},
			{id:115, pId:114, name:"鼠标 事件监听"},
	        ];

	       
	        var zTree= $.fn.zTree.init($("#tree1"), setting, zNodes);
	       

	        var newCount = 1;
	        function addHoverDom(treeId, treeNode) {
	            var sObj = $("#" + treeNode.tId + "_span");
	            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
	            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
	                + "' title='add node' onfocus='this.blur();'></span>";
	            sObj.after(addStr);
	            var btn = $("#addBtn_"+treeNode.tId);
	            if (btn) btn.bind("click", function(){
	                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
	                return false;
	            });
	        };
	        function removeHoverDom(treeId, treeNode) {
	            $("#addBtn_"+treeNode.tId).unbind().remove();
	        };
 }	 
}
};//list

//2.定义路由映射表,每个路径应该映射一个组件
var routerTable = [
	 {name:'list', path: '/'     , component: list }
	 //,{name:'add' , path: '/add'  , component: AppContext.loadComponentAsyn("demo1/add.html")  },
	 //,{name:'edit', path: '/edit' , component: AppContext.loadComponentAsyn("demo1/edit.html") }
];
//3. 创建 router 实例，然后传入routerTable 配置
var router = new VueRouter({routes:routerTable});

new Vue({
	 el : '#app'
    ,router
});

})();</script>
</body>
</html>
